<template>
<div>
 <div class = "content">
    <div class="triangle-topright">
	    <div class="word">2积分</div>
	  </div>
 </div>

 <div>
   <el-row :gutter="15">
      <el-col v-for="(p, index) in projects" :key="index" :span="4">
        <el-card
          shadow="hover"
          class="card">
          {{p}}
        </el-card>
     </el-col>
   </el-row>
 </div>
</div>



</template>

<script>
 export default {
   data () {
     return {
       projects:["王小虎","王小虎","王小虎","王小虎","王小虎","王小虎","王小虎","王小虎","王小虎","王小虎","王小虎","王小虎","王小虎","王小虎","王小虎","王小虎"]

     }
   },
   components: {

   }
 }
</script>

<style>
.content {
    background:#3c88c6;
	position: relative;
    width:200px;
    height: 100px;	
   }
   .word {
      text-align: center;
    margin: auto;
    position: absolute;
    display: inline-block;
    width: 45px;
    right: 0;
    top: -40px;
    color: #FFF;
    transform-origin: bottom center;
    transform: rotate(45deg);
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
   }
   .triangle-topright {
    width: 0;
    height: 0;
    float: right;
    font-size: xx-small;
    border-top: 45px solid #00b570;
    border-left: 45px solid transparent;
    position: relative;
   }
   .card{
     margin-top: 15px;
   }
    .card:hover{
     margin-top: 10px;
   }


 
</style>
